<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./artTemplate-master/dist/template-native.js"></script>
    <script type="text/template" id="code1">

        <table border="1" width="400">
            <thead>
                <% for ( var i = 0; i < title.length; i++ ) { %>
                    <td><%= title[ i ] %></td>
                <% } %>
            </thead>
            <tbody>
                <% for ( var i = 0; i < datas.length; i++ ) { %>
                    <% if ( !datas[ i ].isShow ) continue; %>
                    <tr>
                        <td><%= datas[ i ][ 'name' ] %></td>    <!-- 名字 -->
                        <td><%= datas[ i ].age %></td>
                        <td><%= datas[ i ][ 'gender' ] %></td>
                    </tr>
                <% } %>
            </tbody>
        </table>
    
    </script>

    <script type="text/template" id="code">

        <ul><% for ( var i=0; i< datas.length; i++) { %>
            <li>
                <ul>
                    <% for ( var k in datas[ i ] ) {%>
                    <li><%= datas[ i ][ k ]%></li>
                    <% } %>
                </ul>
            </li>
            <% } %>
        </ul>
    
    </script>
</head>
<body>
    <input type="text" id="txt"><input type="button" value="查询" id="btn">
    <div></div>
</body>
<script>
    var obj = {
        title: [ 'name', 'age', 'gender' ],
        datas: [
            { name: 'jim123', age: 19, gender: '男', isShow: true },
            { name: 'jim1', age: 19, gender: '男', isShow: true },
            { name: 'tom', age: 19, gender: '男', isShow: true },
            { name: 'jim1', age: 19, gender: '男', isShow: true },
            { name: 'jim1', age: 19, gender: '男', isShow: true },
            { name: 'jack', age: 19, gender: '男', isShow: true },
            { name: 'jim1', age: 19, gender: '男', isShow: true },
            { name: 'jim1', age: 19, gender: '男', isShow: true },
            { name: 'jim2', age: 19, gender: '男', isShow: true },
            { name: 'jim3', age: 19, gender: '男', isShow: true },
            { name: 'jim4', age: 19, gender: '男', isShow: true },
            { name: 'jim5', age: 19, gender: '男', isShow: true }
        ]
    };



    // 控制显示用的逻辑
    var container = document.querySelectorAll( 'div' )[ 0 ],
        txt = document.querySelectorAll( '#txt' )[ 0 ],
        btn = document.querySelectorAll( '#btn' )[ 0 ];

    // 页面渲染( 将丑陋的东西渲染成好看的东西 )
    function  render () {
        container.innerHTML = template( 'code', obj );
    }
    render();
    
    btn.onclick = function () {
        // 根据用户的输入 处理数据
        var text = txt.value;
        if ( text.trim().length == 0 ) return;

        // 我要处理的是 数据的筛选
        obj.datas.forEach(function ( v, i ) {
            // 判断 v 中的 isShow, 用 v 中的 name 和 text 判断
            v.isShow = v.name == text;
        });

        // 渲染
        render();
        console.log( 'over' );
    }



    // 因此会将代码进行解耦
    // 我们将页面的逻辑分解为
    // 1> 用于展示数据的模板部分, 它控制着如何显示
    // 2> 用于最终显示的数据, 数据部分. 只是用来被处理. 不参与任何逻辑.
    // 3> 用于连接这两个部分, 并从中起到协调, 控制等功能.

    // MVC 思想
    // M: model 数据模型, 一条数据好比一个对象. 因此将数据称为对象模型
    // V: View 视图. 用于控制如何显示.
    // C: controller 控制器, 连接 模型与视图, 起到控制, 协调的功能.
    
    
</script>
</html>